/**
 * Created by xlwangar on 2018/5/31.
 */
$(function(){
var bar = echarts.init(document.getElementById("bar"));
var line = echarts.init(document.getElementById("line"));
var pie01 = echarts.init(document.getElementById("pie01"));
var pie02 = echarts.init(document.getElementById("pie02"));
    var axisLabel = {
        lineStyle: {
            show:true,
            color: '#053A62'
        },
        textStyle: {
            fontSize: 12,
            color: '#357ACC'
        }
    };
    var axisLine = {
        lineStyle: {
            color: '#053A62',
            width: 0,
        }
    };
    var splitLine = {
        lineStyle: {
            color: '#053A62'
        }
    };
    var barOption = {
        color: ['#00A6E6'],
        /*title: {
            text: '目录提供情况',
            textStyle: {
                color: '#00AEEF',
                fontWeight: 200,
                fontSize:56
            },
            x: 'center',
            y: 40
        },*/
        legend:{
            x:'center',
            y:40,
            itemWidth:10,
            itemHeight:10,
            data:[{
                name : '可共享数据',
                textStyle : {color:'#830A4D',fontSize:16,}
            },{
                name : '数据项',
                textStyle : {color:'#036192',fontSize:16,}
            }]
        },
        grid: {
            x:20,
            y:100,
            x2: 44,
            y2: 30,
            borderWidth: 1,
            borderColor:'#05345A',
            containLabel:true,
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'value',
                axisTick:{length:0},
                textStyle:{
                    fontSize:12
                },
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: {
					textStyle:{
						fontSize:16,
						color:'#0096cc',
						}
					}
            }
        ],
        yAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisTick:{length:0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: {
					textStyle:{
						fontSize:16,
						color:'#0096cc',
						}
					},
                splitArea:{
                    show:true,
                    onGap:true,
                    areaStyle:{
                        color:['rgba(6,29,62,.3)',
                            'rgba(6,29,62,.3)']}
                },
                data: ['交通局', '化工局', '信电局', '电信局', '电力局', '环保局', '科技局', '市场监督局', '农林局', '教育局','卫生局','残联','扶贫办','公积金中心','城管局','财政局','规划局','发改委','质监局','工商局','国土局','安监局','公安局']

            }
        ],
        series: [
            {
                name: '可共享数据',
                type: 'bar',
                stack: '数据',
                barWidth: 16,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#FD0166'},
                                {offset: 0.5, color: '#BC1B73'},
                                {offset: 1, color: '#87307E'}
                            ]
                        )
                    }
                },
                data: [2,12,6,38,9,25,33,4,8,5,32,12,6,48,42,5,32,4,8,5,18,29,31]

            },
            {
                name: '数据项',
                type: 'bar',
                stack: '数据',
                barWidth: 16,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#00ADEE'},
                                {offset: 0.5, color: '#0283BC'},
                                {offset: 1, color: '#036B9C'}
                            ]
                        )
                    }
                },
                data: [12,32,36,48,19,35,23,14,48,35,12,32,36,48,19,35,23,14,48,35,66,72,47]

            }
        ]
    };
    var lineOption = {
        color: ['#01d4da','#019bd8','#d1045d'],
        title: {
            text: '挂接趋势',
            textStyle: {
                color: '#00AEEF',
                fontWeight: 200,
                fontSize:36
            },
            x: 'center',
            y: 'top'
        },
        legend:{
            x:'75%',
            y:30,
            itemWidth:10,
            itemHeight:10,
            data:[{
                name : '库表',
                textStyle : {color:'#01d4da',fontSize:16,}
            },{
                name : '文件',
                textStyle : {color:'#019bd8',fontSize:16,}
            },{
                name : '接口',
                textStyle : {color:'#d1045d',fontSize:16,}
            }]
        },
        grid: {
            x:20,
            y: 100,
            x2: 4,
            y2: 30,
            borderWidth: 1,
            borderColor:'#05345A',
            containLabel:true,
        },
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick:{length:0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                data: ['2016/1', '2016/2', '2016/3', '2016/4', '2016/5', '2016/6', '2016/7', '2016/8', '2016/9', '2016/10','2016/11','2016/12','2017/1','2017/2','2017/3','2017/4','2017/5','2017/6']
            }
        ],
        yAxis: [
            {
                type: 'value',
                boundaryGap: true,
                axisTick:{length:0},
                splitLine: splitLine,
                axisLine: axisLine,
                axisLabel: axisLabel,
                splitArea:{
                    show:true,
                    onGap:true,
                    areaStyle:{
                        color:['rgba(6,29,62,.3)',
                            'rgba(6,29,62,.3)']}
                },

            }
        ],
        series: [
            {
                name: '库表',
                type: 'line',
                smooth:true,
                data: [2,12,6,38,9,25,33,4,8,5,32,12,6,48,42,5,32,4,]

            },
            {
                name: '文件',
                type: 'line',
                smooth:true,
                data: [12,32,36,48,19,35,23,14,48,35,12,32,36,48,19,35,23,14]

            },
            {
                name: '接口',
                type: 'line',
                smooth:true,
                data: [12,32,36,22,19,35,33,14,68,35,52,32,120,48,19,35,53,14]

            }
        ]
    };
    var pie01Option = {
        color:['#01f6f7','#00aeef','#ff0066'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
		/*legend: {
			orient: 'vertical',
			x: '30',
			y: 'center',
			data:['接口','库表','文件'],
			textStyle:{
				color:'#00b0f0',
				}
		},*/
        series: [
            {
                name:'挂接趋势',
                type:'pie',
                radius: ['70%', '90%'],
                center:['50%','50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'库表'},
                    {value:310, name:'文件'},
                    {value:234, name:'接口'}
                ]
            }
        ]
    };
	
	var pie02Option = {
        color:['#01f6f7','#00aeef','#ff0066'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
		/*legend: {
			orient: 'vertical',
			x: '30',
			y: 'center',
			data:['接口','库表','文件'],
			textStyle:{
				color:'#00b0f0',
				}
		},*/
        series: [
            {
                name:'挂接趋势',
                type:'pie',
                radius: ['70%', '90%'],
                center:['50%','50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'库表'},
                    {value:310, name:'文件'},
                    {value:234, name:'接口'}
                ]
            }
        ]
    };

    bar.setOption(barOption);
    line.setOption(lineOption);
    pie01.setOption(pie01Option);
	pie02.setOption(pie02Option);
//    点击切换
    $("#charttab li").on("click",function(){
        $(this).addClass("active").siblings().removeClass("active")
    })
    $("#charttab1 li").on("click",function(){
        $(this).addClass("active").siblings().removeClass("active")
    })
})